<template>
	<div id="Home">
		<lunbo></lunbo>
		<div class="tt">
		    <h2>本店特色</h2>
			<div class="ding">
		        <div class="t1">
				    <p>音乐<br/>啤酒让人麻醉，音乐让人清醒，摇摆灯光深 夜美<br/>味，低吟浅唱亦或是引亢高歌。手持啤酒，碌着烧<br/>烤，一起哼唱，充分释放。</p>
			    </div>
		        <div class="t2">
				    <p>啤酒<br/>音乐和啤酒就是绝配，搭配天生的华尔兹舞步现场<br/>氛围快速升温，让您体验一样与众不同的烧烤盛<br/>宴，手持啤酒，碌着烧烤</p>
		        </div>
		        <div class="t3">
				    <p>派对<br/>派对是年轻人的狂欢在我们有限的青春里请尽情享受<br/>一群人的狂欢一个人的孤独不要成为那个孤独的人<br/>一起跳舞，一起狂欢</p>
		        </div>
		    </div>
		</div>
		<div class="bo">
			<div class="qiang"><img src="../assets/img/in-title.png" alt=""></div>
		    <h3>要味道</h3>
		    <p>一店撸遍全球，现串现烤，想怎么吃就怎么吃。鲜香麻辣，浓油赤酱，满足每个挑剔的吃货。尽情撸串，酣畅淋漓，体味人间美食。</p>
		    <img src="../assets/img/ad-1.jpg" alt="">
		    <h3>更要腔调</h3>
		    <p>大口撸串，放肆喝酒，尽情high唱，这里没有规矩，没有界限，追求自由和释放才是属于年轻人自己的腔调。</p>
		    <img src="../assets/img/Img391114917.jpg" alt="">
			<div class="bottom">
			    <div><img src="../assets/img/f-1.png" alt="">半成品输出，极速配送</div>
			    <div><img src="../assets/img/f-2.png" alt="">优质产地，严格品控</div>
			    <div><img src="../assets/img/f-3.png" alt="">品类齐全，口味丰富</div>
			    <div><img src="../assets/img/f-4.png" alt="">菜品创新，活动迭代</div>
		    </div>
		</div>
	</div>
</template>

<script>
	import lunbo from '../components/lunbo.vue'
	export default {
		name:'Home',
		props:{},
		data(){
		  return {
			
		  }
		},
		components:{lunbo},
		mounted(){},
		updated(){},
		methods:{}
	}
</script>

<style scoped>
	#Home{
		padding-top: 25px;
		background-color: #000000;
	}
	body,html{
		font-size: 18px;
		background:rgb(13, 13, 13);
	}
	#Home h1{
		position: absolute;
		text-align:center;
		color:#fff;
		top: 500px;
		left: 50%;
		transform: translatex(-50%);
	}
	#Home h2{
		text-align:center;
		color:#fff;
		line-height: 100px;
	}
	.tt{
		background-image:url(../assets/img/show.png);
		width: 100%;
		height:530px;
	}
	.ding{
		width:1075px;
		margin: auto;
	}
	.t1,.t2,.t3{
		display: inline-block;
		background-size:100% 100%;
		width:335px;
		height:380px;
		text-align: center;
		margin: 0px 5px 0px 10px; 
	}
	.t1{
		background-image:url(../assets/img/icon-music.jpg);
	}
	.t1:before{
		content:"";
		display: inline-block;
		background-image: url(../assets/img/icon-1.png);
		width:180px;
		height: 150px;
		background-size: 100% 100%;
		margin-top:20px;
	}
	.t2{
		background-image:url(../assets/img/icon-beer.jpg);
	}	
	.t2:before{
		content:"";
		display: inline-block;
		background-image: url(../assets/img/icon-2.png);
		width:180px;
		height: 150px;
		background-size: 100% 100%;
		margin-top:20px;
	}
	.t3{
		background-image:url(../assets/img/icon-party.jpg);
	}
	.t3:before{
		content:"";
		display: inline-block;
		background-image: url(../assets/img/icon-3.png);
		width:180px;
		height: 150px;
		background-size: 100% 100%;
		margin-top:20px;
	}
	.tt p{
		color:#fff;
		font-size: 12px;
		line-height:30px;
		margin-top: 30px;
	}
	.tt img{
		width:200px;
		height:160px;
	}
	.ding>div:hover{
		background:rgba(0,0,0,.2);
	}
	.t1:hover:before{
		background-image: url(../assets/img/icon-1-1.png);
	}
	.t2:hover:before{
		background-image: url(../assets/img/icon-2-2.png);
	}
	.t3:hover:before{
		background-image: url(../assets/img/icon-3-3.png);
	}
	.qiang{
		text-align:center;
	}
	.qiang img{
		width:300px;
		height:65px;
	}
	.bo{
		text-align:center;
		color: #fff;
		background-color:rgb(13,13,13);
	}
	.bo p{
		line-height: 80px;
	}
	.bo h3{
		line-height: 40px;
	}
	.bottom{
		margin: auto;
		width:1000px;
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 100px;
	}
	.bottom div{
		position: relative;
		height: 50px;
		line-height: 50px;
	}
	.bottom img{
		position: absolute;
		width:45px;
		height:50px;
		left:-55px;
	}
</style>
